<template>
	<view class="index">

		<!-- 上分段栏 -->
		<view class="home_tab_title">
			<view class="title_inner">
				<!-- 分段器 -->
				<uni-segmented-control :current="current" :values="items.map(v=>v.title)" @clickItem="onClickItem" style-type="text"
				 active-color="#2b2b2b"></uni-segmented-control>
				<view class="iconfont icon-search"></view>
			</view>
		</view>

		<!-- 内容去 -->
		<view class="home_tab_content">
			<view class="content">
				<view v-if="current === 0">
					<recommend></recommend>
				</view>
				<view v-if="current === 1">
					<category></category>
				</view>
				<view v-if="current === 2">
					<news></news>
				</view>
				<view v-if="current === 3">
					<album></album>
				</view>
			</view>
		</view>


	</view>
</template>

<script>
	import recommend from "./homeComponents/recommend.vue"
	import news from "./homeComponents/news.vue"
	import album from "./homeComponents/album.vue"
	import category from "./homeComponents/category.vue"
	import SegmentedControl from "../../components/uni-segmented-control/uni-segmented-control.vue"

	export default {
		data() {
			return {
				//分段器
				items: [{
						title: "推荐"
					},
					{
						title: "分类"
					},
					{
						title: "最新"
					},
					{
						title: "专辑"
					}
				],
				current: 0
			}
		},
		methods: {
			// 分段器
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex;
				}
			},
		},
		components: {
			recommend,
			album,
			news,
			category,
			SegmentedControl //分段器
		}
	}
</script>

<style lang="less">
	.home_tab_title {
		position: relative;

		.title_inner {
			width: 60%;
			margin: 0 auto;
		}

		.icon-search {
			position: absolute;
			top: 50%;
			right: 5%;
			transform: translateY(-50%);
		}
	}

	.home_tab_content {}
</style>
